<template>
  <div class="zerotabbar">
    <div class="tab_box">
      <!-- 横向滚动选项卡 -->
      <div class="row" ref="wrapper">
        <div class="row_content">
          <div class="row_box" v-for="(item,index) in tabbar" :key="index">
            <div
              class="row_item"
              :class="curact==index?'act':''"
              @click="active(index)"
            >{{item.name}}</div>
          </div>
        </div>
      </div>
      <!-- 纵向选项卡内容 -->
      <div class="col" ref="col_wrapper" :style="{'bottom':$store.state.curindex!=-1?'40px':''}">
        <div class="col_content">
          <transition-group
            enter-active-class="animated fadeInLeft"
            leave-active-class="animated fadeOutLeft"
          >
            <div
              class="col_box"
              v-for="(item,index) in tabbar"
              :key="item.id"
              v-show="index==curact"
              v-touch.left.right="change"
            >
              <div
                class="col_item"
                v-for="(item, index) in tabbar_detail"
                :key="index"
                @click="get_songlist(item.id)"
              >
                <div class="col_item_cover">
                  <img v-lazy="item.coverImgUrl+'?param=150y150'" alt />
                  <div class="item_playCount">
                    <i class="iconfont icon-erji"></i>
                    {{item.playCount>1.0e8?(item.playCount/1.0e8).toFixed(0)+'亿':item.playCount>1.0e4?(item.playCount/1.0e4).toFixed(0)+'万':item.playCount }}
                  </div>
                </div>
                <div class="col_item_name">{{item.name}}</div>
              </div>
            </div>
          </transition-group>
          <zeroLoading v-if="pulluploading"></zeroLoading>
          <div v-if="!pullup">没有更多了</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import BScroll from "better-scroll";
export default {
  name: "zerotabbar",
  data() {
    return {
      curact: 0,
      showspinner: false,
      pulluploading: false, // 上拉加载动画
      pullup: true, // 上拉开关
      offset:0,
    };
  },
  props: {
    // 1. 接收选项卡标题
    tabbar: {
      default: []
    },
    // 2. 接收详情
    tabbar_detail: {
      default: []
    }
  },
  methods: {
    // 点击选项卡标题
    active(index) {
      this.curact = index;
      let name = this.tabbar[index].name;
      //在DOM更新结束后执行的回调
      this.$nextTick(() => {
        this.scroll.scrollToElement(".act", 500, true, false, "easing");
      });
      //点击后把分类名传给页面
      this.$emit("topcat", name);
      // 刷新better-scroll
      this.pullup = true;
      this.scrollcol.refresh();
       this.scrollcol.scrollTo(0,0);
    },
    // 手势左右滑动
    change(e) {
      console.log(e);
      if (e.dir == "right") {
        if (this.curact == 0) {
        } else {
          this.active(this.curact - 1);
        }
      } else if (e.dir == "left") {
        if (this.curact == this.tabbar.length - 1) {
        } else {
          this.active(this.curact + 1);
        }
      }
    },
    // 带歌单 id 跳转到歌单页
    get_songlist(id) {
      this.$router.push({
        name: "songlist",
        params: {
          id
        }
      });
    },
    // better-scroll 横向滚动
    rowscroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
            scrollX: true,
            // 忽略竖直方向的滚动
            scrollY: false,
            probeType: 3
            // eventPassthrough: "vertical"
          });
        } else if (!this.$refs.wrapper) {
          return;
        } else {
          this.scroll.refresh();
        }
      });
    },
    // better-scroll 纵向滚动
    colscroll() {
      this.$nextTick(() => {
        //$refs绑定元素
        if (!this.scrollcol) {
          this.scrollcol = new BScroll(this.$refs.col_wrapper, {
            //开启点击事件 默认为false
            click: true,
            mouseWheel: true,
            probeType: 3,
            pullUpLoad: {
              threshold: -50
            }
          });
          //上拉加载
          this.scrollcol.on("pullingUp", () => {
            console.log("上拉");
            //判断是否还需要加载更多
            if (this.pullup) {
              console.log(this.cat);
              this.pulluploading = true;
              this.offset += 18;
              let { top_playlist } = this.api;
              top_playlist.params = {
                cat: this.cat,
                limit: 18,
                offset: this.offset,
              };
              this.getsource(top_playlist).then(res => {
                console.log("歌单+", res);
                if (!res.data.more) {
                  this.pullup = false;
                } else {
                  res.data.playlists.forEach(item => {
                    this.tabbar_detail.push(item);
                  });
                }
              });
            }
            this.scrollcol.finishPullUp();
            setTimeout(() => {
              // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
              this.pulluploading = false;
            }, 1500);
          });
        } else if (!this.$refs.col_wrapper) {
          return;
        } else {
          this.scrollcol.refresh();
        }
      });
    }
  },
  mounted() {
    this.rowscroll();
    this.colscroll();
  },
  computed: {
    cat() {
      return this.tabbar[this.curact].name;
    },
  }
};
</script>


<style lang='scss' scoped>
$zerocolor: #d43c33;
$fontcolor: #333;
.tab_box {
  width: 100vw;
  height: 100%;
  position: relative;
  //   横向
  .row {
    width: 100vw;
    overflow: hidden;
    position: fixed;
    top: 40px;
    .row_content {
      width: 200vw;
      display: flex;
      flex-flow: row nowrap;
      .row_box {
        width: 20vw;
        margin: 5px;
        .row_item {
          width: 100%;
          white-space: nowrap;
          line-height: 30px;
          font-size: 14px;
          border-bottom: 1px solid transparent;
        }
        .act {
          color: $zerocolor;
          border-bottom: 1px solid $zerocolor;
        }
      }
    }
  }
  //  纵向
  .col {
    position: absolute;
    top: 40px;
    bottom: 0;
    overflow: hidden;
    .col_content {
      width: 100%;
      .col_box {
        width: 100%;
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        .col_item {
          // width: 30%;
          // margin: ;
          width: 28vw;
          margin: 0 calc((100% - 84vw) / 6);
          .col_item_cover {
            width: 100%;
            height: 28vw;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              box-shadow: inset 0 15px 20px -10px #000;
            }
            img {
              width: 100%;
              height: 100%;
            }
            .item_playCount {
              position: absolute;
              top: 2px;
              right: 8px;
              font-size: 12px;
              color: #fff;
              font-weight: 500;
              z-index: 5;
            }
          }
          .col_item_name {
            font-size: 12px;
            color: $fontcolor;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>